<template>
  <view>
    <u-sticky>
      <TopTabs
        :list-data="statusList"
        key-name="name"
        :current.sync="current"
        @tabClick="orderStatusClick"
      />
    </u-sticky>
    <basePage :show-tabbar="false" :page-params="pageParams">
      <view
        class="order-list"
      >
        <OrderItem
          :order-res-data="orderList"
          :modal-show-close="modalShowClose"
          @requestCancellationFn="requestCancellationFn"
          @ZYinit ="ZYinit"
        />
        <view class="u-p-b-40">
          <u-loadmore :status="status" />
        </view>
        <u-modal
          :show="modalShowClose"
          :show-confirm-button="false"
          title="是否取消"
        >
          <view class="slot-content">
            <view class="btn-box">
              <button
                class="btn cancel-btn btn-boundless"
                :plain="true"
                @click="cancelModalFn"
              >
                取消
              </button>
              <button
                class="btn confirm-btn"
                @click="confirmModalFn"
              >
                确定
              </button>
            </view>
          </view>
        </u-modal>

      </view>
    </basePage>
  </view>
</template>

<script>
import basePage from '@/components/base-page'
import TopTabs from '@/components/top-tabs'
import OrderItem from '@/myAccount/pointsMall/orderItem'
import { queryStoreIntegralOrders, cancelOrder } from '@/api/yc_userInfo';
import { setPageParamsFn } from '@/common/common'

const statusList = [
  {
    name: '全部',
    code: '',
  },
  {
    name: '待发货',
    code: [50],
  },
  {
    name: '待收货',
    code: [60],
  },
  {
    name: '已完成',
    code: [80],
  },
  {
    name: '已取消',
    code: [100]
  },
  {
    name: '交易关闭',
    code: [110]
  }
]
export default {
  name: 'PointsRecords',
  components: {
    TopTabs,
    basePage,
    OrderItem
  },
  data() {
    return {
      statusList,
      page: 1,
      pageSize: 20,
      orderStatus: '',
      current: 0,
      status: 'loading',
      pageParams: {
        // state: '',
        emptyTitle: '一个订单都没有哦～',
        errorTitle: '请求失败',
        showButton: false
      },
      orderList: [],
      modalShowClose: false,
      orderSn: '', //第三方订单号
    }
  },
  onLoad() {
    this.queryStoreIntegralOrdersFn()
  },
  onReachBottom() {
    if (this.pageParams.state == 'EMPTY') {
      this.page = 1
    } else {
      this.page++
    }
    if (this.page > this.totalPages) {
      this.status = ''
      return
    }
    this.queryStoreIntegralOrdersFn()
  },
  onShow() {
    this.page = 1
    console.log('33333333333')
    this.queryStoreIntegralOrdersFn()
  },
  methods: {
    //自由商品取消触发列表函数
    ZYinit(){
      this.page = 1
      this.queryStoreIntegralOrdersFn()
    },
    // 申请取消
    requestCancellationFn(val, orderSn) {
      if (val == false) {
        this.modalShowClose = true
        this.orderSn = orderSn
      }
    },
    cancelModalFn() {
      this.modalShowClose = false
    },
    confirmModalFn() {
      //点击了确定按钮返回成功之后 掉列表接口刷新页面
      const params = {
        orderSn: this.orderSn
      }
      cancelOrder(params).then((res) => {
        if (res.code == 0) {
          this.page = 1
          this.queryStoreIntegralOrdersFn()
          this.modalShowClose = false
        } else {
          this.$u.toast(res.msg)
        }
      })
    },
    orderStatusClick(data) {
      this.orderStatus = data.code.toString(',')
      this.page = 1
      this.queryStoreIntegralOrdersFn()
    },
    async queryStoreIntegralOrdersFn() {
      this.status = 'loading'
      const params = {
        account_type: '20',
        orderStatus: this.orderStatus,
        nowPage: this.page,
        pageSize: this.pageSize,
      }
      const res = await queryStoreIntegralOrders(params)
      this.status = ''
      if (res.code != 0) {
        this.$u.toast(res.msg)
        return
      }
      setPageParamsFn(this, null)
      if (!res.data || (this.page == 1 && res.data.data.length == 0)) {
        setPageParamsFn(this, 'EMPTY', '矮油，这里空空如也~', false)
        return
      }
      if (this.page == 1) {
        this.orderList = res.data.data
      } else {
        this.orderList.push(...res.data.data)
      }
      this.totalPages = res.data.rowCount
      if (res.data.pageSize <= this.pageSize) {
        this.status = 'nomore'
      }
    },
  }
}
</script>

<style scoped lang="scss">
.order-list{
  padding: 0 32rpx;
}
.btn-box {
  .btn{
    width: 220rpx;
    margin: 48rpx 12rpx 0;
    height: 72rpx;
    line-height: 72rpx;
    font-size: $uni-font-size-base;
    display: inline-block;
    color: $uni-text-color;
  }
  .cancel-btn{
    margin-right: 36rpx;
    background: $uni-bg-color;
  }
  .confirm-btn{
    color: #fff;
    background: $uni-orange;
    padding:0 24rpx;
    border: 0;
  }
}
</style>
